<template>
    <div class="item">
        <div class="tree_title_box" :class="item.selected ? 'radio_checked' : ''" v-for="(item, index) in options" :key="index">
            <div class="tree_title">
                <p class="dep_name">
                    {{item.name}}
                </p>
                <div class="radio_box"  @click="changeIsSelect(index)">
                    <iconSvg name="checked" w="20px" h="20px" class="radio_check_icon"></iconSvg>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        options: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {}
    },
    methods: {
        changeIsSelect(index) {
            this.$emit('changeIsSelect', index)
        }
    }
}
</script>

<style lang="less" scoped>
    .item{
        padding: 0 9px 0 23px;
        .tree_title_box{
             display: flex;
             padding: 6px 0;
             &.radio_checked{
                 .tree_title{
                     .radio_box{
                        &::before{
                            background: #456DE6;
                        }
                        .radio_check_icon{
                            color: #fff;
                        }
                    }
                 }
             }
             .tree_title{
                 flex: 1;
                 display: flex;
                 .dep_name{
                     flex: 1;
                     font-size: 15px;
                 }
                 .radio_box{
                    position: relative;
                    width: 20px;
                    height: 20px;
                    &::before{
                        position: absolute;
                        display: inline-block;
                        content: '';
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        border-radius: 50%;
                        border: 1px solid #456DE6;
                        background: transparent;
                    }
                    .radio_check_icon{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-55%, -48%);
                        color: #456DE6;
                    }
                 }
             }
        }
    }
</style>